<template>
  <div class="app-container home">
    <div class="home_bigData">
      <header>
        <div class="title">可视化大屏展示</div>
        <div class="showTime">
          {{ ` ${yearMonthDay} ${hourMinuteSecond} ${whatDay}` }}
        </div>
        <div class="weather">
          <div class="weather_city">{{ currentCity }}</div>
          <div class="weather_img">
            <img :src="weather_img" alt="多云" /><span
              style="margin-left: 10px"
              >{{ weather }}</span
            >
          </div>

          <div lass="weather_city">{{ temperate }}℃</div>
        </div>
      </header>
      <section class="mainbox">
        <div class="column">
          <div class="panel bar">
            <div class="panel_title">
              购买力分析<a href="javascript:;">一月</a>
              <a href="javacript:;">二月</a>
            </div>
            <div class="chart"></div>
            <div class="panel-footer"></div>
          </div>
          <div class="panel line">
            <!-- <div class="panel_title">折线图-xxxx</div> -->
            <div class="chart"></div>
            <div class="panel-footer"></div>
          </div>
          <div class="panel pie">
            <!-- <div class="panel_title">饼形图-xxxxxxx</div> -->
            <div class="chart"></div>
            <div class="panel-footer"></div>
          </div>
        </div>
        <div class="column">
          <div class="no">
            <div class="no-hd">
              <ul>
                <li>225811元</li>
                <li>14563元</li>
              </ul>
            </div>
            <div class="no-bd">
              <ul>
                <li>本月累计累计</li>
                <li>今天销量</li>
              </ul>
            </div>
          </div>
          <div class="map">
            <div class="chart" ref="chinaMap"></div>
            <div class="map1"></div>
            <div class="map2"></div>
            <div class="map3"></div>
          </div>
        </div>
        <div class="column">
          <div class="panel bar1">
            <!-- <div class="panel_title">柱状图-xxxx</div> -->
            <div class="chart"></div>
            <div class="panel-footer"></div>
          </div>
          <div class="panel line1">
            <!-- <div class="panel_title">折线图-xxxxxx</div> -->
            <div class="chart"></div>
            <div class="panel-footer"></div>
          </div>
          <div class="panel pie1">
            <!-- <div class="panel_title">饼形图-xxxx</div> -->
            <div class="chart"></div>
            <div class="panel-footer"></div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>
<script setup name="Index">
import * as echarts from "echarts";
import { onMounted, ref, onBeforeUnmount } from "vue";
import chinaJson from "@/utils/china.json";
import { flexible } from "@/utils/flexible.js";
import { timeFormate } from "@/utils/formateTime";
import {
  barinit,
  lineinit,
  pieinit,
  barTwoinit,
  lineTwoinit,
  pieTwoinit,
  chinainit
} from "@/utils/init.js";
import axios from "axios";
const hourMinuteSecond = ref(timeFormate(new Date()).hourMinuteSecond);
const yearMonthDay = ref(timeFormate(new Date()).yearMonthDay);
const whatDay = ref(timeFormate(new Date()).whatDay);
const currentCity = ref("九江");
const weather = ref("晴");
const temperate = ref("19");
const weather_img = ref("/src/assets/images/yun.png");
onMounted(() => {
  // getWeather();
  barinit();
  lineinit();
  pieinit();
  barTwoinit();
  lineTwoinit();
  pieTwoinit();
  // drawChina();
  chinainit(),
  showTimes(); //定时器
});
// const drawChina = () => {
//     var myChart = echarts.init(chinaMap.value)
//     echarts.registerMap('china', chinaJson) //注册可用的地图
//   }

const drawChina = () => {
  // var myChart = echarts.init(chinaMap.value);
  // echarts.registerMap("china", chinaJson); //注册可用的地图
  // const option = {
  //   //浮动提示框
  //   // title: { text: '全国各地信息统计情况',left: "4%",top: "3%"},
  //   tooltip: {
  //     backgroundColor: "rgba(6, 43, 182,0.7)",
  //     textStyle: { color: "#fff" },
  //     formatter(params, ticket, callback) {
  //       // params.data 就是series配置项中的data数据遍历
  //       console.log('params',params);
  //       let value = 999,
  //         rukuNum = 888,
  //         chukuNum = 111;
  //       if (params.data) {
  //         value = params.data.value;
  //         // rukuNum = params.data.rukuNum;
  //         // chukuNum = params.data.chukuNum;
  //       }
  //       let html = `<div>交易金额：${value}元</div>`;
  //       return html;
  //     },
  //   },
  //   // visualMap: {
  //   //   type: "piecewise",
  //   //   min:0,
  //   //   max:5000,
  //   //   itemWidth: 40,
  //   //   bottom:60,left:20,
  //   //   pieces: [ // 自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
  //   //     {gt: 900, lt: 1000, label: '900-1000', color: '#6ad86e'}, // (900, 1000]
  //   //     {gt: 500, lt: 900, label: '500-900', color: '#9adcfa'}, // (500, 900]
  //   //     {gt: 310, lt: 500, label: '310-500', color: '#ffeb3b'}, // (310, 500]
  //   //     {gt: 100, lt: 300, label: '100-300', color: '#ff9800'}, // (200, 300]
  //   //     {gt: 0, lt: 100, label: '>100', color: 'orangered'} // (10, 200]
  //   //   ]
  //   // },
  //   geo: {
  //     map: "china",
  //     zoom: 1.2,
  //     aspectScale: 0.75,
  //     show: true,
  //     roam: true,
  //     label: {
  //       show: true,
  //       color: "white",
  //       fontSize: 10,
  //     },

  //     itemStyle: {
  //       //地图区域的多边形 图形样式
  //       borderColor: "rgba(0, 0, 0, 0.2)", //描边颜色
  //       areaColor: "rgba(43, 196, 243, 0.52)", //地图的背景色
  //       borderWidth: 1, //描边线宽
  //     },
  //     emphasis: {
  //       // 高亮状态下的多边形和标签样式
  //       shadowBlur: 0,//文字快的北京阴影长度
  //       focus: "self",//移入只显示高亮的省份
  //       areaColor: "#f39c12",
  //       shadowColor: "rgba(0, 0, 0, 0.5)",
  //       label: {
  //         color: "white",
  //         fontSize: 12,
  //       },
  //     },
  //   },

  //   series: [
  //     {
  //       name: "",
  //       type: "map",
  //       geoIndex: 0,
  //       label: { show: true },
  //        colorBy:'data',
  //       data: [
  //         { name: "北京市", value: 42, rukuNum: 42, chukuNum: 8 },
  //         { name: "上海市", value: 688, rukuNum: 688, chukuNum: 299 },
  //         { name: "黑龙江省", value: 7, rukuNum: 7, chukuNum: 0 },
  //         { name: "辽宁省", value: 2341,},
  //         { name: "吉林省", value: 9876,},
  //         { name: "内蒙古自治区", value: 199,},
  //         { name: "新疆维吾尔自治区", value: 99,},
  //         { name: "西藏自治区", value: 660,},
  //         { name: "青海省", value: 481,},
  //         { name: "甘肃省", value: 863,},
  //         { name: "云南省", value: 1999,},
  //         { name: "四川省", value: 9876,},
  //         { name: "宁夏回族自治区", value: 950,},
  //         { name: "山西省", value: 864,},
  //         { name: "陕西省", value: 1999,},
  //         { name: "重庆市", value: 9800,},
  //         { name: "贵州省", value: 1870,},
  //         { name: "湖北省", value: 20897,},
  //         { name: "湖南省", value: 18986,},
  //         { name: "河南省", value: 9273,},
  //         { name: "河北省", value: 28732,},
  //         { name: "广西壮族自治区", value: 8989,},
  //         { name: "广东省", value: 99238,},
  //         { name: "澳门特别行政区", value: 99,},
  //         { name: "香港特别行政区", value:22,},
  //         { name: "海南省", value: 9876,},
  //         { name: "台湾省", value: 888,},
  //         { name: "福建省", value: 98754,},
  //         { name: "江西省", value: 12832,},
  //         { name: "浙江省", value: 28892,},
  //         { name: "安徽省", value: 28371,},
  //         { name: "江苏省", value:19832,},
  //         { name: "山东省", value: 8767,},
  //         { name: "天津市", value: 23981,},
  //         { name: "北京市", value: 87654,},
  //       ],
  //     },
  //   ],
  // };
  // myChart.setOption(option);
  // window.addEventListener("resize", function () {
  //   myChart.resize();
  // });
};

const getWeather = () => {
  axios({
    url: "https://v0.yiketianqi.com/free/day?appid=32433245&appsecret=gnj4I2Vy&unescape=1&city=九江",
    method: "GET",
  }).then((res) => {
    console.log("res", res);
    currentCity.value = res.data.city;
    weather.value = res.data.wea;
    temperate.value = res.data.tem;
    weather_img.value = `/src/assets/images/${res.data.wea_img}.png`;
  });
};
function showTimes() {
  const timer = setInterval(() => {
    yearMonthDay.value = timeFormate(new Date()).yearMonthDay;
    hourMinuteSecond.value = timeFormate(new Date()).hourMinuteSecond;
    whatDay.value = timeFormate(new Date()).whatDay;
  }, 1000);
}
</script>

<style scoped lang="scss">
@import "index.scss";
</style>
